<template>
  <main>
    <div class="home-container">
      <aside class="left-sidebar">
        <NavMenu />
      </aside>
      <div class="main-content">
        <FeaturedPosts class="featured-section" />
        <BlogList class="blog-list-section" />
      </div>
    </div>
  </main>
</template>

<script setup>
import BlogList from '../components/BlogList.vue'
import NavMenu from '../components/NavMenu.vue'
import FeaturedPosts from '../components/FeaturedPosts.vue'
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
}

.left-sidebar {
  position: fixed;
  width: 240px;
  left: calc((100% - 1200px) / 2 + 20px);
  /* top: 84px; */
}

.main-content {
  margin-left: 264px;
  /* margin-top: 10px; */
  display: flex;
  flex-direction: column;
  gap: 24px;

}

.featured-section,
.blog-list-section {
  width: 100%;
}

@media (max-width: 768px) {
  .left-sidebar {
    display: none;
  }

  .main-content {
    margin-left: 0;
  }
}

@media (max-width: 1240px) {
  .left-sidebar {
    left: 20px;
  }
}
</style>
